@import '@animxyz/core';

@keyframes xyz-xray-in {
  0%, 50% {
    background-color: $green;
  }
}

@keyframes xyz-xray-out {
  0%, 50% {
    background-color: $red;
  }
}

@keyframes xyz-xray-appear {
  0%, 50% {
    background-color: $yellow;
  }
}

.xyz-xray {
  [xyz] {
    position: relative;
    --xyz-in-keyframes: xyz-xray-in;
    --xyz-out-keyframes: xyz-xray-out;
    --xyz-appear-keyframes: xyz-xray-appear;

    &:hover {
      box-shadow: inset 0 0 0 3px $cyan;

      &::after {
        content: attr(xyz);
        position: absolute;
        top: 0;
        left: 0;
        padding: $sp-xxxs;
        margin-right: $sp-xs;
        background-color: $cyan;
        color: darken($cyan, 50%);
        line-height: 1.25;
        font-weight: 600;
        font-family: $font-stack-mono;
        font-size: $fs-s;
        text-align: left;
        z-index: 9999;
        pointer-events: none;
      }
    }
  }

  [xyz='']:hover::after {
    padding: 0;
  }
}